<template lang='pug'>
  div
    Modal.ss-add-modal-lzw(v-model="show" fullscreen title="新增客户" :closable="false" :mask-closable="false")
      .coustomer-created
        ul.step-ul
          template(v-for="(item,index) in stepArr")
            li.line(:class="index < currentStep ? 'active' : ''")
              .line-div
            li.li-content(:class="index < currentStep ? 'active' : ''")
              .img-box(:class="'style-' + (index + 1)" @click="stepClick(index)")
              span.text {{item}}
      Divider.mt-12.mb-10
      //- 基本信息
      div(v-show="currentStep === 1")
        Step_1(
          ref="step_1"
          :customerId="customerId"
          @on-next="next"
          @set-id="setCustomerID"
        )
      div(v-show="currentStep === 2")
        Step_2(
          ref="step_2"
          :customerId="customerId"
          @on-preview="preview"
          @on-next="next"
        )
      div(v-show="currentStep === 3")
        Step_3(
          ref="step_3"
          :customerId="customerId"
          :hasCustomerId="hasCustomerId"
          @on-next="next"
        )
      div(v-show="currentStep === 4")
        Step_4(
          ref="step_4"
          :customerId="customerId"
          :code="hetongCode"
          @on-next="next"
        )
      div(v-show="currentStep === 5")
        Step_5(
          ref="step_5"
          :customerId="customerId"
          @on-next="next"
        )
      div(v-show="currentStep === 6")
        Step_6(
          ref="step_6"
          :customerId="customerId"
          :hasCustomerId="hasCustomerId"
          :customerType="customerType"
          @on-next="next"
          @on-preview="preview"
          @refresh-data="refreshData"
        )
      template(slot="footer")
        Button(v-show="currentStep != 1" type="info" @click="prevStep") 查看上一步
        Button(:disabled="hasCustomerId" @click="cancel") 取消
        Button(type="info" @click="submitBtn" :disabled="nextDisabled") {{submitBtnText}}
    Modal(v-model="previewModal" footer-hide)
      img(:src="previewImgUrl")
      
</template>

<script>
import dataApi from '@/api/data'
import Step_1 from './step_1.vue'
import Step_2 from './step_2.vue'
import Step_3 from './step_3.vue'
import Step_4 from './step_4.vue'
import Step_5 from './step_5.vue'
import Step_6 from './step_6.vue'

export default {
  name:'createCustomer',
  props:{
    show: false,
  },
  data () {
    return {
      submitBtnText: '保存并跳转下一步',
      stepArr: ['基本信息', '营业执照信息', '费用信息', '合同信息', '参保信息', '薪资发放与附件管理'],
      currentStep: 1, // 当前处于第几步
      customerId: '', // 客户id
      hasCustomerId: false, // 是否存在客户id
      previewModal: false,
      previewImgUrl: '',
      customerType: 0,
      hetongCode: ''
    }
  },

  components: {
    Step_1,
    Step_2,
    Step_3,
    Step_4,
    Step_5,
    Step_6
  },

  computed: {
    nextDisabled () {
      if (this.hasCustomerId || this.currentStep === 1) {
        return false
      } else {
        return true
      }
    }
  },

  
  mounted() {
  },

  methods: {
    stepClick (index) {
      // this.currentStep = index + 1
      console.log(index)
    },
    prevStep () {
      if (this.currentStep < 2) {
        return false
      } else {
        this.currentStep--
      }
    },
    next (val) {
      this.currentStep = val
    },
    setCustomerID (val) {
      this.customerId = val
    },
    cancel () {
      this.$emit('on-cancel')
    },
    submitBtn () {
      switch (this.currentStep) {
        case 1:
          this.$refs.step_1.stepSubmit()
          break;
        case 2:
          this.$refs.step_2.stepSubmit()
          break;
        case 3:
          console.log(3)
          this.$refs.step_3.stepSubmit()
          break;
        case 4:
          this.$refs.step_4.stepSubmit()
          break;
        case 5:
          console.log(5)
          this.$refs.step_5.stepSubmit()
          break;
        case 6:
          console.log(6)
          this.$refs.step_6.stepSubmit()
          break;
      }
    },
    // 预览图片
    preview (val) {
      this.previewModal = true
      this.previewImgUrl = val
    },
    // 创建成功后重置所有表单
    refreshData () {
      this.$refs.step_1.refreshData()
      this.$refs.step_2.refreshData()
      this.$refs.step_3.refreshData()
      this.$refs.step_4.refreshData()
      this.$refs.step_5.refreshData()
      this.$refs.step_6.refreshData()
      Object.assign(this.$data, this.$options.data())
      this.$emit('get-list')
    },
    // 获取客户合作类型
    getType () {
      if (this.hasCustomerId) {
        dataApi.getSingle({
          id: this.customerId
        }).then(res => {
          if (res.data.success) {
            this.customerType = res.data.data.type
            this.formValidate.categoriesID = res.data.data.categoriesInfo ? res.data.data.categoriesInfo.map(item => {
              return item.categoriesID
            }) : []
          } else {
            this.customerType = 0
          }
        })
      } else {
        this.customerType = 0
      }
    },
  },

  watch: {
    currentStep (val) {
      if (val === 6) {
        this.submitBtnText = '完成并关闭'
        this.getType()
      } else {
        this.submitBtnText = '保存并跳转下一步'
      }
    },
    customerId (val) {
      if (val) {
        dataApi.getDefaultContractNo().then(res => {
          this.hetongCode = res.data.data
        })
        this.hasCustomerId = true
      } else {
        this.hasCustomerId = false
      }
    }
  }

}

</script>
<style lang='less' scoped>
  @import '../coustomer.less';
</style>